<?php 
    session_start();
    if(!isset($_SESSION['islogined'])||@$_SESSION['idposition']==1)
        header("location:./Login.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="app.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
    <?php include 'header1.php'; ?>
    <div class="container">
        <ol class="breadcrumb path-nav">
            <li><a href="./Home.php">Home</a></li>
            <li class="active">All Tasks</li>
        </ol>
    </div>
    <div class="container">
        <div class="col-md-3 col-md-offset-9 ">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Task Name">       
                <span class="glyphicon glyphicon-search input-group-addon"></span>         
            </div>                     
        </div>            
    </div>
    <div class="container list-container ">
        <div class="col-md-3">            
                <ul class="list-group">
                <li id='all_task_li' class="list-group-item " data-name="all">All Tasks</li>
                <ul class="all-task">
                   <li class="list-group-item all-task-item" data-name="alcted"> Allocated Tasks</li>
                   <li class="list-group-item all-task-item" data-name="unalcted"> Unallocated Tasks</li>
                </ul>
                <li class="list-group-item active" data-name="">Applying Task</li>
                </ul>          
        </div>
        <div class="col-md-9 ">
            
            <div class='container-fluid template-list-item template-list-header'>
                <div class='col-md-6'>Task Name</div>
                <div class='col-md-3'>Staff</div>       
                <div class='col-md-2'>View</div>
            </div>
            <div class='container-fluid template-list-item '>
                <form role="form">
                    <div class='col-md-6 '>
                        <div class="radio">
                            <label >
                                <input type="radio" value="option1">taskname***
                            </label>
                        </div>
                    </div>
                    <div class='col-md-3 task-staff-name'>Staff name</div>      
                    <div class='col-md-2'><button class='btn btn-default btn-sm jm-box' data-id='$taskid' data-type='V'>View</button></div>
                </form>
            </div>
            <div class="col-md-2 col-md-offset-10">
                <button class='btn btn-default btn-block apply-task-btn'>Apply Task</button>    
            </div>
            
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<script src="jquery-3.0.0.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
    $(function(){
        bottomclc();
        boxJump();
        $('#all_task_li').click(function(){
            $('.all-task').toggle();
        });
        $('.list-group-item').click(function(){
            $('.list-group-item').removeClass('active');
            $(this).addClass('active');
            var type=$(this).data('name');
            $.post("infor_change.php",{
               task_request_type:type
           },function (data){
               $('.col-md-9').html(data);
               bottomclc();
                boxJump();
           })
        });
    });
    function bottomclc(){
        $(".subtemplete").unbind('click').bind('click',function(){
            if($(this).hasClass('glyphicon-triangle-bottom')){
                $(this).removeClass('glyphicon-triangle-bottom');
                $(this).addClass('glyphicon-triangle-left');
            }
            else{
                $(this).removeClass('glyphicon-triangle-left');
                $(this).addClass('glyphicon-triangle-bottom');
            }
            var id=$(this).data('id');
            $("."+id).toggle();
        });
    }
    function boxJump(){
        $(".jm-box").click(function(){
            var id=$(this).data('id');
            var type=$(this).data('type');
            var str=type+"_"+id;
            $.get("TaskRequest.php?id="+str,null,function(data){
                $('#myModal').html(data);                
                $('#myModal').modal();
                formdispose();
            })
        });
    }
    function formdispose(){
    $("#update_btn").click(function(){
           var f_type="update_task";
           var f_taskID=$("#taskID").val();
           if($("#wlus").length>0){
               var f_wlus=$("#wlus").val();
           }
           else{
               f_wlus=null;
           }
           var f_notes=$("#notes").val();
           $.post("infor_change.php",{
               type:f_type,
               taskID:f_taskID,
               wlus:f_wlus,
               notes:f_notes
           },function (data){
               $('.success-coin').remove();
               $('.l_'+f_taskID).html(data);
               boxJump();
               bottomclc();
           })
       });
    }
</script>
</body>
</html>